<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工管理</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css"  tppabs="https://www.layui.site/layui/dist/css/layui.css"  media="all">
	</head>
	<body>
		<!-- 新增员工 -->
		<div id="staffOpen" style="display: none;">
			<form class="layui-form" lay-filter="layui-detail" action="/updateStaffInfoAdd" method="post"><!--  -->
				<input type="hidden" name="empId" value="empId" />
				<div class="layui-form-item" >
					<label class="layui-form-label" style="width: 110px;">员工姓名:</label>
					<div class="layui-input-inline">
					  <input type="text" name="empName"  class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label" style="width: 110px;">所任职务:</label>
					<div class="layui-input-inline">
						<select name="jobId" id="staffJob" >
							<option value="">请选择</option>
					    </select>
					</div>
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label" style="width: 110px;">提成比例:</label>
					<div class="layui-input-inline">
					  <input type="text"  name="empCommission"  class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label" style="width: 110px;">联系电话:</label>
					<div class="layui-input-inline">
					  <input type="text"  name="empPhone"  class="layui-input">
					</div>
					<input type="checkbox" name="empStatus" title="禁用" lay-skin="primary" value="1">
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label" style="width: 110px;">联系地址:</label>
					<div class="layui-input-inline">
					  <input type="text"  name="empAddress"  class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label" style="width: 110px;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</label>
					<div class="layui-input-inline">
					  <input type="text"  name=""  class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" style="text-align: center;">
					<div class="layui-inline">
						<button type="submit" lay-submit="" lay-filter="staffInfos" class="layui-btn">保&nbsp;&nbsp;存</button>
					</div>
					<div class="layui-inline">
						<button type="reset" class="layui-btn">重&nbsp;&nbsp;置</button>
					</div>
				</div>
			</form>
		</div>
		
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" id="staffInsert" lay-event="staffInsert">新&nbsp;&nbsp;&nbsp;增</button>
			<button class="layui-btn layui-btn-sm layui-btn-normal" id="staffUpdate" lay-event="staffUpdate">修&nbsp;&nbsp;&nbsp;改</button>
			<button class="layui-btn layui-btn-sm layui-btn-danger" id="staffDelete" lay-event="staffDelete">删&nbsp;&nbsp;&nbsp;除</button>
		  </div>
		</script>
		
		<div style="margin: 15px;">
			<table class="layui-table" lay-filter="staff" id="test3"></table>
		</div>
		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'layer'], function(){
				var tree = layui.tree
				    ,layer = layui.layer
					,table = layui.table
					,$ = layui.jquery
					,form = layui.form;
				//下拉列表动态输入
				$(function(){
						$.get("/searchStaffJobInfo",function(data){
							for(var i in data){
								$('#staffJob').append(new Option( data[i].jobName , data[i].jobId ));
							}
							//要重新解析这个结构
							form.render('select');
						})
						
				})
				var empId;//删除的变量
				table.on('row(staff)', function(obj){
					obj.tr.addClass('layui-bg-green').siblings().removeClass('layui-bg-green');
					empId = obj
				});
				
				//对按钮进行判断	
				table.on('toolbar(staff)', function(obj){
					switch(obj.event){
					  case 'staffInsert'://添加员工信息
						layer.open({
							type: 1,
							title: '员工添加',
							scrollbar: false,
							area: ['500px', '90%'],
							content: $('#staffOpen'),
							success:function(){
								$('#staffOpen form')[0].reset();
								table.reload('test3', {
								    url:"../../../searchStaffInfo",
								    page: {
								        curr: 1
								    }
								}); 
							}
						});
					  break;
					  case 'staffUpdate'://修改员工信息
						  if(empId.data.empId != null){
							  layer.open({
								type: 1,
								title: '员工修改',
								scrollbar: false,
								area: ['700px', '90%'],
								content: $('#staffOpen'),
								success:function(){
									form.val('layui-detail',empId.data);      //渲染表单
								}
							  });
						  }else{
							  	layer.msg("请先选择你要修改的员工")
						  }
						  
					  break;
					  case 'staffDelete'://删除员工信息
						layer.confirm('真的删除行么', function(){
							$.get("/updateStaffInfoDelete",{empId:empId.data.empId},function(row){
								if(row = 1){
									empId.del();
									layer.msg("删除成功")
								}else{
									layer.msg("删除失败")
								}
							})
						});
					  break;
					};
				})
				
				
					
				
				
				//对当前按钮进行判断，是修改页面还是提交页面
				form.on('submit(staffInfos)', function(data){
					var a = $("input[name=empId]").val()
					if(a == "empId"){
						/* 关闭当前弹出层 */
						parent.layer.close(parent.layer.getFrameIndex(window.name));//先得到当前iframe层的索引
						window.parent.location.reload();
					}else{
						$.get("/updateStaffInfo",data.field,function(row){
							if(row = 1){
								layer.msg('修改成功');
							}else{
								layer.mgs('修改成功');
							}
						})
						/* 关闭当前弹出层 */
						parent.layer.close(parent.layer.getFrameIndex(window.name));//先得到当前iframe层的索引
						parent.location.reload();
					}
					//return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				
				
				///员工信息表格
				table.render({
				    elem: '#test3'
				    ,url: '../../../searchStaffInfo'
					,toolbar: '#toolbarDemo'
				    ,cols: [[
						{field:'empId', width:100, title: 'id',hide:true}
					  ,{field:'empName', width:100, title: '员工信息'}
				      ,{field:'', width:120, title: '职务',templet:function(obj){
								return obj.employeeJob.jobName
						}}
				      ,{field:'empCommission', width:120, title: '提成比例'}
				      ,{field:'empPhone', width:120, title: '联系电话'}
				      ,{field:'empAddress', width:120, title: '联系地址'}
				      ,{field:'', width:120, title: '禁用',templet:function(obj){
							if(obj.empStatus == 1){
								return "是"
							}else{return "否"}
								 
						}}
				    ]],
				    limits: [10, 15, 20, 25, 50, 100],
				    page: true
				});
				
			})
		</script>
	</body>
	
</html>
